<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :maskClosable="false"
    :okButtonProps="{ class:{'jee-hidden': disableSubmit} }"
    @cancel="close"
    cancelText="关闭">
    <div class="amap-wrapper" style="margin-bottom: 20px;width:100%;height: 65vh">
      <div class="search-div">
        <a-select
          show-search
          allowClear
          v-model="model.value"
          placeholder="请输入关键字搜索"
          style="width: 300px"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          @search="onSearch"
          @change="handleChange"
        >
          <a-select-option v-for="(item, index) in data" :key="item.id">
            <span>{{ item.name }}</span>&nbsp;<span style="color:#acaaaa;font-size: 13px">{{ item.district }}</span>
          </a-select-option>
        </a-select>
      </div>

      <el-amap class="amap-box"
       :zoom="amap.zoom"
       :center="amap.center"
       :plugin="amap.plugin"
       :events="amap.events">
        <el-amap-marker
          v-for="(marker, index) in amap.markers"
          :key="'marker' + index"
          :position="marker.position"
        />
        <!-- 位置名称显示 -->
        <el-amap-text
          v-for="(marker, index) in amap.markers"
          :key="'text' + index"
          :text="marker.text"
          :offset="marker.offset"
          :position="marker.position"
        />
      </el-amap>
    </div>
  </j-modal>
</template>

<script>
export default {
  name: 'MapContainer',
  data() {
    const that = this;
    return {
      visible: false,
      disableSubmit: false,
      width: '70%',
      title: '',
      data: [],
      value: '',
      model:{},
      placeSearchComponent: null,
      params: {
        address: '',
        province: '',
        city: '',
        district: '',
        lng: 0,
        lat: 0,
      },
      amap: {
        zoom: 15,
        center: [114.920417, 25.799019],
        events: {
          click(e) {
            that.amap.markers = [];
            const { lng, lat } = e.lnglat;
            that.params.lng = lng;
            that.params.lat = lat;
            that.amap.center = [lng, lat];
            let geocoder = new AMap.Geocoder({
              radius: 100,
              extensions: "all",
            });
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === "complete" && result.info === "OK") {
                if (result && result.regeocode) {
                  let province = result.regeocode.addressComponent.province;
                  let city = result.regeocode.addressComponent.city;
                  let district = result.regeocode.addressComponent.district;
                  let township = result.regeocode.addressComponent.township;
                  that.params.address = province + city + district + township + that.model.value;
                  that.params.province = province;
                  that.params.city = city;
                  that.params.district = district;
                  that.params.township = township;
                  let op = {
                    position: [lng, lat],
                    text: result.regeocode.formattedAddress,
                    offset: [0, 30],
                  };
                  that.amap.markers.push(op);
                }
              }
            })
            that.$nextTick();
          }
        },
        plugin: [{
          zoomToAccuracy: true,
          events: {
            init(o) {
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  that.amap.center = [this.lng, this.lat];
                  let op = {
                    position: [this.lng, this.lat],
                    text: result.formattedAddress,
                    offset: [0, 30],
                  };
                  that.amap.markers.push(op);
                  that.$nextTick();
                }
              })
            }
          }
        }],
        markers: [],
      }
    }
  },
  mounted() {
    let that = this;
    AMap.plugin(['AMap.Autocomplete'], function(){
      that.placeSearchComponent = new AMap.Autocomplete({
        city: '全国'
      })
    })
  },
  methods: {
    init(lng, lat, address) {
      if(lng && lat) {
        const obj = {
          position: [lng, lat],
          text: address,
          offset: [0, 30],

        };
        this.amap.markers.push(obj);
        this.amap.center = [lng, lat];
      }
    },
    handleChange(value) {
      let that = this;
      if(value) {
        let data = this.data.find(item => item.id === value)
        this.model.value = data.name;
        this.amap.markers = [];
        const { lng, lat, name } = data.location
        const obj = {
          position: [lng, lat],
          text: name,
          offset: [0, 30],
        };
        this.amap.markers.push(obj);
        let geocoder = new AMap.Geocoder({
          radius: 100,
          extensions: "all",
        });
        geocoder.getAddress([lng, lat], function (status, result) {
          if (status === "complete" && result.info === "OK") {
            if (result && result.regeocode) {
              let province = result.regeocode.addressComponent.province;
              let city = result.regeocode.addressComponent.city;
              let district = result.regeocode.addressComponent.district;
              let township = result.regeocode.addressComponent.township;
              that.params.address = province + city + district + township + that.model.value;
              that.params.province = province;
              that.params.city = city;
              that.params.district = district;
              that.params.township = township;
            }
          }
        })
        this.params.lng = lng;
        this.params.lat = lat;
        this.amap.center = [lng, lat];
      } else {
        this.data = [];
      }
    },
    onSearch(value) {
      let that = this;
      this.data = [];
      this.placeSearchComponent.search(value, function (status, result){
        if(status === "complete" && result.info === "OK") {
          that.data = result.tips
        }
      })
    },
    handleOk() {
      this.params.village = this.model.value;
      this.$emit('ok', this.params);
      this.close();
    },
    close() {
      this.visible = false;
      this.amap.markers = [];
      this.model.value = '';
    },
  }
}
</script>
<style scoped>
  .amap-wrapper {
    height: calc(80vh);
  }

  .search-div {
    width: 300px;
    margin-bottom: 10px;
  }
</style>